728x90
728x90

Flutter (앱 개발) 39

[Flutter 숙련 TIL] 블로그 앱 만들기2 Firebase Firestore 사용 + Flutter에 Firebase 연동 + UI 구성까지(+예시 파일 제공)

목차 Ⅰ. 시작하며 📌 개념은 쉬운데, 실전에선 시행착오의 연속 📌 NoSQL 구조와 데이터 설계 Ⅱ. 본론 📌 1. Firebase 프로젝트 생성과 Firestore 세팅 📌 2. Firestore 데이터 저장 구조 📌 3. Firebase Storage와 이미지 처리 방식 📌 4. 실시간 반영을 위한 Stream 처리 Ⅲ. 정리하며 📌 Firebase의 위력을 실감 📌 MVVM 구조와 잘 어우러지는 느낌 🟣 시작하며 – Firebase를 처음 접했을 때의 느낌 개념은 쉬운데, 실전에선 시행착오의 연속 Firebase는 '서버 없이 앱을 만들 수 있다'는 간단한 소개와 달리, 실제로 연동해보니 익숙하지 않은 구조와 많은 설정 항목들이 처음엔 부담스럽게 다가왔습니다. 특히 Fires..

PowerShell에서 flutterfire 명령어가 인식되지 않는 오류 해결 방법

목차 Ⅰ. 오류 원인 📌 PowerShell에서 flutterfire 명령어 인식되지 않는 문제 📌 환경 변수 경로 미설정 Ⅱ. 해결 순서 📌 1. 시스템 환경 변수 설정 열기 📌 2. 환경 변수 창 열기 📌 3. Path 변수 수정 📌 4. PowerShell 재시작 및 명령어 실행 Ⅲ. 느낀점 📌 환경 변수 설정의 중요성 📌 개발 중 오류 해결의 과정 Ⅰ. 오류 원인 PowerShell에서 flutterfire 명령어 인식되지 않는 문제 Flutter 프로젝트에서 flutterfire 명령어를 실행하려고 할 때, PowerShell에서 명령어가 인식되지 않는 오류가 발생하는 경우가 있습니다. 이 오류는 주로 시스템 환경 변수 설정이 부족하거나 잘못된 경우에 발생합니다. flut..

[Flutter 숙련 TIL] 블로그 앱 만들기1 MVVM 구조 + UI 구성까지(+예시 파일 제공)

목차 Ⅰ. 시작하며 📌 MVVM 구조에 적응 📌 Form 유효성 검사와 텍스트 컨트롤러 Ⅱ. 본론 📌 1. 전체 폴더 구조 및 기초 뼈대 작업 📌 2. HomePage 구성 – 리스트와 앱바, ListView 기본 UI 📌 3. etailPage – 아이콘 재사용과 텍스트 본문 구성 📌 4. WritePage – TextFormField와 Form 구조 잡기(GitHub link) Ⅲ. 정리하며 📌 TextFormField와 키보드 UX 고려 📌 구조화된 설계의 중요성 ✍ 시작하며 MVVM 구조에 적응하는 데 시간이 걸렸다 블로그 앱을 만들기 전, MVVM 아키텍처와 폴더 구조를 나누는 데 많은 고민을 했습니다. 특히 View와 ViewModel을 어떤 기준으로 나..

[Flutter 숙련 TIL ] 책검색 앱 만들기 Part 02 :: OpenAPI 연동하기

목차 Ⅰ. 시작하며 📌 처음 해보는 Open API 연동, 막막함에서 출발 📌구조를 이해하니 머릿속이 정리되기 시작했다 Ⅱ. 실습 요약 및 구성 📌 1. Open API란? 📌 2. NAVER Developers에서 API 등록하기 📌 3. Thunder Client로 API 테스트하기 📌 4. Flutter 프로젝트에서 구현한 구조 Ⅲ. 정리하며 📌 전 연동에서 발생한 실수들 📌 실전처럼 구성해보니 자신감 상승 Flutter에서 네이버 Open API를 활용한 책 검색 앱을 만들며, 실무에서 자주 사용되는 OpenAPI 연동, HTTP 요청 처리, 그리고 MVVM 구조 적용을 학습한 과정입니다.Ⅰ. ✨ 시작하며 처음 해보는 Open API 연동, 막막함에서 출발 책 검색 앱을..

[Thunder Client] Flutter REST API 테스트 도구 추천! VS Code 확장 Thunder Client 사용법과 후기

목차 Ⅰ. 이 프로그램이 무엇인지 📌 1. Thunder Client란? 📌 2. Thunder Client의 탄생 배경 Ⅱ. 어떻게 활용할 수 있을까? 📌 1. Flutter API 연동 전 기능 점검 📌 2. 컬렉션으로 프로젝트별 API 정리 📌 3. Header, Body, Auth 간편 설정 📌 4. 가볍고 빠른 UI – Postman의 대안 Ⅲ. 이 프로그램의 사용 후기 📌 1. Flutter 개발 속도, 정말 빨라졌어요 📌 2. 실무와 팀 프로젝트 모두에 적합 Thunder Client – VS Code에서 바로 API 테스트하기 Flutter로 앱을개발하다 보면백엔드 서버와의REST API 통신이중요한 요소로 떠오릅니다. 특히 외부 서버에서데이터를 받아오거나,회원가입/..

[홈화면 리뉴얼] 시행착오 속에서 피어난 목표 – 캐릭터 스튜디오 앱 개발기

목차 Ⅰ. 오늘 하루의 시작 📌 흐트러진 목표, 다시 잡은 방향 📌 ‘완성’보다 ‘작동하는 흐름’을 만들기 Ⅱ. ⚙️ 오늘의 주요 시행 내용 📌 1. Figma 기초 가이드 특강 참석 📌 2. 앱 UI/UX 설계 – 캐릭터 만들기 앱 홈화면 구성 📌 3. 그림 그리기 + 관절 체크 기능 구현 📌 4. 에셋 스토어 + 장바구니 기능 구현 Ⅲ. 결론 📌 계획보다 ‘속도감’이 중요했다 Ⅰ. 오늘 하루의 시작 흐트러진 목표, 다시 잡은 방향 사실 요즘 들어약간 흔들리고 있었습니다. 어떤 방향으로 앱을 만들어야 할지, 내가 정말 사용자 입장에서 필요로 하는 기능을 구현하고 있는 게 맞는지 계속 고민했거든요. 처음의 열정은 컸지만, 갈수록 기능은 늘고, 시간은 줄어드니 마음이 조급해졌죠. ..

Flutter 개인 프로젝트 – 감정 기반 웹툰 에디터 앱을 시작하며

목차 Ⅰ. Flutter 개인 프로젝트를 시작하며 📌 Flutter를 시작하게 된 계기 📌 왜 감성툰 앱인가? Ⅱ. 프로젝트 주요 내용 📌 1. 앱의 기본 구조 📌 2. 사용자 경험(UX) 고민 📌 3. 시행착오와 배움 📌 4. 앱에 반영한 나만의 요소 Ⅲ. 결론 📌 1. 6월 MVP 완성과 사용자 피드백 📌 2. 향후 기능 고도화 및 런칭 준비 Ⅰ. Flutter 개인 프로젝트를 시작하며 Flutter를 시작하게 된 계기 얼마 전까지 웹툰 자동화 플랫폼을 기획하면서도, 항상 "내가 만든 기획을 직접 구현해보고 싶다"는 생각이 머릿속을 맴돌았습니다. Flutter는 그 첫 시작점이었습니다. 디자인적으로 자유롭고, 모바일 앱에 적합하며, 무엇보다 비전공자도 접근할 수 있다는 점에서 ..

[Flutter 숙련 TIL] 책검색 앱 만들기 Part 01 - (TextField, GridView, BottomSheet, WebView)

목차 Ⅰ. 시작하며 📌 1. 앱을 직접 구성해보기 전, 내가 막혔던 지점들 📌 2. 직접 UI부터 하나씩 만들며 구조를 익힌 시간 Ⅱ. 본론 📌 1. MVVM 구조 잡기: 프로젝트 폴더 설계 📌 2. 검색창 UI 구현: TextField + AppBar 📌 3. GridView 구현: 격자 형태로 책 리스트 구성하기 📌 4. BottomSheet + WebView + DetailPage 연동(+GitHub) Ⅲ. 정리하며 📌 1. 실제 구현하면서 느꼈던 실수들 📌 2. 하나씩 쌓아가는 UI 구현 경험의 힘 Ⅰ. 시작하며 앱을 직접 구성해보기 전, 내가 막혔던 지점들 MVVM 구조를 Flutter에 어떻게 적용해야 할지 막막했습니다. 특히 구조를 나눌 때 어느 기준으로 폴더를 구성해야..

[Flutter 숙련 TIL] 상태관리 패키지 Riverpod 사용법과 MVVM 구조 적용하기

목차 Ⅰ. 들어가며 📌 Flutter 상태관리, 왜 Riverpod인가? Ⅱ. 본론 📌 1. Riverpod이란? 📌 2. 기본 사용법 요약 📌 3. 실전 예제 – "유저 정보를 가져와 화면에 표시하기" 📌 4. 상태유지 전략 – Notifier, AutoDispose, Family (+GitHub) Ⅲ. 정리하며 – 내가 겪은 시행착오와 배운 점 📌 시작하며 📌 Riverpod을 쓰고 나서 달라진 점 Ⅰ. 들어가며 Flutter 상태관리, 왜 Riverpod인가? Flutter를 공부하면서가장 큰 고민 중 하나는바로 “상태 관리”였습니다.기초적인 예제에서는setState()로 해결할 수 있었지만,앱이 커지면 커질수록위젯과 상태가 뒤섞이고 유지보수가 어려워졌죠. 이 때 등장하는..

[Flutter 숙련 TIL] MVVM 아키텍쳐 알아보기 -StatefulWidget 코드 이해

목차 Ⅰ. 서론 📌 1. 한눈에 보기 힘들었던 StatefulWidget 코드 📌 2. 한 번 구조가 잡히면 정말 편해진다 Ⅱ. 본론 📌 1. MVVM이란? – 구조와 역할 분리 📌 2. MVVM vs StatefulWidget 차이점 📌 3. MVVM의 장점 📌 4. Flutter에서의 MVVM 구현 방법 Ⅲ. 결론 📌 1. 처음엔 귀찮고 복잡하지만 결국 더 편해지는 구조 📌 2. Flutter에서의 성장 포인트 Ⅰ. 서론 한눈에 보기 힘들었던 StatefulWidget 코드 Flutter를 처음 접했을 때는 StatefulWidget 하나만으로도 로직부터 상태, UI까지 모두 구현할 수 있어서 나름 만족스러웠어요. 하지만 프로젝트가 커지면서 화면마다 복잡해진 로직이 겹치고, 기능..

728x90
728x90